<template>
  <div>
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>完工照片
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(-1)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>返回
          </el-button>
          <el-button type="info" @click="$router.go(0)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe662;</span>刷新
          </el-button>
        </div>
      </div>
    </div>
    <div class="component-searchHeader">
      <div class="search-header">
        <div class="left-title">
          <p class="left-text">紧急扩容需求提报(完成)表</p>
          <div class="right"></div>
        </div>
      </div>
    </div>
    <div class="tables">
      <table cellpadding="0" cellspacing="0" border="1">
        <tr>
          <td>站点名称</td>
          <td>{{info.siteAddress}}</td>
          <td>BMS工单号</td>
          <td>{{info.bmkRelevanceNo}}</td>
        </tr>
        <tr>
          <td>紧急扩容</td>
          <td>{{info.odb}}</td>
          <td>光分所属对象</td>
          <td>{{info.opticalObject}}</td>
        </tr>
        <tr>
          <td>OBD名称</td>
          <td>{{info.odbName}}</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>光交外部照片</td>
          <td>
            <a href="javaScript:;" @click="openPhoto(pics[0].url)" class="red">{{pics[0].name}}</a>
          </td>
          <td>光交内加盘位后照片</td>
          <td>
            <a href="javaScript:;" @click="openPhoto(pics[1].url)" class="red">{{pics[1].name}}</a>
          </td>
        </tr>
        <tr>
          <td>光交内加盘位前照片</td>
          <td>
            <a href="javaScript:;" @click="openPhoto(pics[2].url)" class="red">{{pics[2].name}}</a>
          </td>
          <td>光分外部照片</td>
          <td>
            <a href="javaScript:;" @click="openPhoto(pics[3].url)" class="red">{{pics[3].name}}</a>
          </td>
        </tr>
        <tr>
          <td>光分内部测光照片</td>
          <td>
            <a href="javaScript:;" @click="openPhoto(pics[4].url)" class="red">{{pics[4].name}}</a>
          </td>
          <td>管线截图照片</td>
          <td>
            <el-upload
              class="upload-demo"
              action="/api/web/sysFile/uploadFile"
              :headers="myheader"
              :data="exe_data"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="successFile"
              :before-remove="beforeRemove"
              multiple
              :limit="1"
              accept=".jpg, .png, .JPG, .PNG"
              :on-exceed="handleExceed"
              :file-list="fileList"
               v-show="!pics[5].name"
            >
              <el-button size="small" type="primary">上传文件</el-button>
              <div slot="tip" style="color: #ccc;" class="el-upload__tip">只能上传jpg/png文件</div>
            </el-upload>
            <a v-show="pics[5].name" href="javaScript:;" @click="openPhoto(pics[5].url)" class="red">{{pics[5].name}} </a> 
            <a v-show="pics[5].name" @click="delFile(pics[5].url)" class="red"> 删除</a>
          </td>
        </tr>
      </table>
    </div>
    <!-- 预览照片 -->
    <div class="component-model">
      <el-dialog title="预览照片" :visible.sync="checkPhoto" width="1140px">
        <div class="input-box">
          <div class="checkbox">
            <img :src="photoUrl" style="max-width:900px;margin:10px auto">
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="checkPhoto = false">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myheader: { token: localStorage.getItem("token") },
      exe_img: img_url, //图片前缀
      exe_data: {
        parentId: this.$route.query.proId,
        bizType: "Pipeline.screenshots"
      },
      info: {},
      fileList: [],
      checkPhoto: false,
      photoUrl: "",
      isUpload: false,
      baseImg_url: img_url,
      pics: [
        { bizType: "光分外部照片", name: "", pic: 1, url: "" },
        { bizType: "光交内加盘位后照片", name: "", pic: 2, url: "" },
        { bizType: "光交内加盘位前照片", name: "", pic: 3, url: "" },
        { bizType: "光分外部照片", name: "", pic: 4, url: "" },
        { bizType: "光分内部测光照片", name: "", pic: 5, url: "" },
        { bizType: "管线截图照片", name: "", pic: 6, url: "" }
      ]
    };
  },
  created() {},
  mounted() {
    this.dataInit();
  },
  methods: {
    dataInit() {
      let that = this,
        suCb = function(res) {
          console.log(res);
          that.info = that.deepClone(res.data);
          that.pics = that.deepClone(res.data.pics);
        },
        erCb = function(res) {
          console.log(res);
        },
        palyParam = {
          url: "/api/web/proProject/getEmergencyExpansion",
          methods: "post",
          data: {
            proId:that.$route.query.proId
          },
          success: suCb,
          error: erCb
        };
      that.$https(palyParam);
    },
    //文件上传
    handleRemove(file, fileList) {
      this.fileList = [];
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      return true;
      this.$message.warning(`当前限制选择 1 个文件，请先删除再上传`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm("确认删除吗？");
    },
    successFile(res, file, fileList) {
      if (res.flag == 1) {
        this.dataInit();
      } else if (res.flag == 2) {
        this.$erMsg("请重新登录");
        this.$router.push({ name: "login" });
      } else if (res.flag == 0) {
        this.$erMsg("上传失败");
        this.fileList = [];
        this.dataInit();
      }
    },
    // 预览
    openPhoto(url) {
      this.checkPhoto = true;
      this.photoUrl = this.baseImg_url + url;
    },
    // 删除照片
    delFile(fileUrl) {
      this.$confirm("确认删除吗？")
        .then(_ => {
          let that = this,
            suCb = res => {
              console.log("文件删除", res);
              that.$msg("删除成功");
              that.dataInit();
              that.fileList = [];
            },
            erCb = res => {
              console.log(res);
            },
            req = {
              url: "/api/web/sysFile/deleteFile",
              methods: "post",
              data: {
                fileUrl: fileUrl.replace(/http.*?(?=up)/, ""),
                parentId: that.$route.query.proId
              },
              success: suCb,
              error: erCb
            };
          that.$https(req);
        })
        .catch(_ => {});
    }
  },
  watch: {}
};
</script>
<style scoped>
.component-mainHeader .top .topright {
  font-size: 24px;
}

.component-searchHeader .search-header {
  width: 1100px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
}

.component-searchHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-searchHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  line-height: 45px;
  text-align: left;
  margin: 0 0 0 30px;
}
.tables table {
  width: 1100px;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 auto;
  padding: 0;
  border: none;
  font-size: 12px;
}
.tables table tr td {
  height: 50px;
}
.tables table td:nth-of-type(2n + 1) {
  text-align: right;
  padding-right: 20px;
  width: 140px;
  background: #f9fafc;
}
.tables table td:nth-of-type(2n) {
  width: 315px;
}

.table-title > div:last-of-type {
  float: right;
  margin: -45px 20px 10px;
}
.table-title > div:last-of-type span {
  display: inline-block;
  margin-left: 20px;
  padding: 5px 20px;
  margin-top: 10px;
  cursor: pointer;
  border-radius: 4px;
}
.table-title > div:last-of-type span:first-of-type {
  border: 1px solid #e4e4e4;
  color: #666;
  background: #fff;
}
.table-title > div:last-of-type span:last-of-type {
  border: 1px solid #1abc9c;
  color: #fff;
  background: #1abc9c;
}

.uploadBtn {
  height: 26px;
  line-height: 26px;
  margin: 7px;
  width: 90px;
  color: #1abc9c;
  border: 1px solid #1abc9c;
  background-color: #fff;
}
.uploadBtn:hover {
  color: #fff;
  background-color: #1abc9c;
}

.red{
  color: #1abc9c;
  cursor: pointer;
}
</style>
